import { memo, useEffect, useRef } from 'react'
import { Viewer as CesiumViewer } from 'cesium'
import { DEFAULT_CONFIG } from '../config/global.config'
import MeasureDistanceTool from './MeasureDistance'

export interface Props {
  options: CesiumViewer.ConstructorOptions
  children: React.ReactNode
}

// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
function Viewer(props: Props = {}) {
  const { options = {}, children } = props
  const cesiumContainer = useRef(null)
  useEffect(() => {
    let viewer
    if (cesiumContainer.current) {
      viewer = new CesiumViewer(cesiumContainer.current, {
        ...DEFAULT_CONFIG,
        ...options
      })
      viewer.scene.debugShowFramesPerSecond = true
      const measureTool = new MeasureDistanceTool(viewer)
    }
    return (): void => {
      viewer && viewer.destroy()
    }
  })
  return <div className='h-full' ref={cesiumContainer}>{children}</div>
}

export default memo(Viewer)
